<template>
    <div class="pagebody">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 申请出货管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search-box">
                <el-form :inline="true">
                    <el-form-item label="内单号">
                        <el-input v-model="searchSet.code" prefix-icon="el-icon-search" clearable placeholder="请输入搜索信息"></el-input>
                    </el-form-item>
                    <el-form-item label="申请起止时间">
                        <el-date-picker
                            v-model="searchSet.startTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        >
                        </el-date-picker>
                        &nbsp; <label for="">~</label> &nbsp;
                        <el-date-picker
                            v-model="searchSet.endTime"
                            clearable
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerTimeOptions"
                        ></el-date-picker>
                    </el-form-item>
                    <!-- <el-form-item label="客户手机号">
                        <el-input
                            v-model="searchSet.userMobile"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入搜索信息"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="客户姓名">
                        <el-input
                            v-model="searchSet.userName"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入搜索信息"
                        ></el-input>
                    </el-form-item> -->
                    <el-form-item label="客户代码">
                        <el-input
                            v-model="searchSet.userCode"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入搜索信息"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="订单状态">
                        <el-select v-model="searchSet.orderStatus" placeholder="选择状态" clearable>
                            <el-option
                                v-for="item in orderStatusOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="经手人">
                        <el-input
                            v-model="searchSet.packageUserName"
                            prefix-icon="el-icon-search"
                            clearable
                            placeholder="请输入搜索信息"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="删除状态">
                        <el-select v-model="searchSet.status" placeholder="选择状态" clearable>
                            <el-option label="已删除" value="0"></el-option>
                            <el-option label="正常" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
                </el-form>
            </div>
            <el-table
                :data="tableData"
                v-loading="tableLoading"
                border
                class="table"
                ref="multipleTable"
                :row-class-name="TableRowClassName"
            >
                <el-table-column prop="appuserCode" label="用户代码" align="center" />
                <el-table-column prop="channelname" label="发货渠道" align="center" width="130" />
                <el-table-column prop="nationname" label="目的国家" align="center" />
                <!-- <el-table-column prop="addressid" label="地址信息" align="center" /> -->
                <el-table-column prop="details" label="包裹数量" width="90" :formatter="formatPackNumber" align="center" />

                <el-table-column prop="code" label="内单号" align="center" />

                <el-table-column prop="addtime" label="申请时间" align="center" />
                <!-- <el-table-column prop="orderstatus" :formatter="formatOrderStatus" label="订单状态" align="center" /> -->
                <el-table-column label="订单状态" align="center">
                    <template slot-scope="scope">
                        <div
                            class="CustomTag"
                            :style="{
                                'background-color': orderStatusOption[scope.row.orderstatus]
                                    ? orderStatusOption[scope.row.orderstatus].color
                                    : '#909399'
                            }"
                        >
                            {{ orderStatusOption[scope.row.orderstatus] ? orderStatusOption[scope.row.orderstatus].label : '无效' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="packageusername" label="经手人" align="center" />
                <el-table-column prop="packagetime" label="出货时间" align="center" />
                <el-table-column label="操作" width="210" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-s-order" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                        <el-button type="text" icon="el-icon-box" @click="handlePack(scope.$index, scope.row)">打包出货录单</el-button>
                        <el-button type="text" icon="el-icon-s-order" @click="handleErrorDetail(scope.$index, scope.row)"
                            >问题处理</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="query.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="query.pageSize"
                    :total="itemTotal"
                    @current-change="handlePageChange"
                    @size-change="handlePageSizeChange"
                ></el-pagination>
            </div>
        </div>

        <el-dialog title="出货录单操作" :visible.sync="editVisible" fullscreen>
            <el-form ref="form" size="mini" :inline="true" :model="form">
                <el-descriptions :column="3" size="mini" :labelStyle="{ width: '150px' }" :contentStyle="{ 'min-width': '100px' }" border>
                    <el-descriptions-item label="渠道名称">{{ selectRow.channelname }}</el-descriptions-item>

                    <el-descriptions-item label="目的国家">{{ selectRow.nationname }}</el-descriptions-item>
                    <el-descriptions-item label="申请时间">{{ selectRow.addtime }}</el-descriptions-item>
                    <el-descriptions-item label="申请用户代码">{{ selectRow.appuserCode }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="申请用户昵称">{{selectRow.appusername}}</el-descriptions-item> -->
                    <el-descriptions-item label="订单状态">
                        <div
                            v-if="orderStatusOption[selectRow.orderstatus]"
                            class="CustomTag"
                            :style="{
                                'background-color': orderStatusOption[selectRow.orderstatus]
                                    ? orderStatusOption[selectRow.orderstatus].color
                                    : '#909399'
                            }"
                        >
                            {{ orderStatusOption[selectRow.orderstatus] ? orderStatusOption[selectRow.orderstatus].label : '无效' }}
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="渠道单价">${{ selectRow.channelprice }}</el-descriptions-item>
                    <!-- <el-descriptions-item label="阶梯单价" :span="2">
                        <div class="FlexRowWarp">
                            <div v-for="(item, index) in selectRow.pricedetails" class="StepPriceItem" :key="index">
                                {{ item.minweight }}&nbsp;~&nbsp;{{ item.maxweight }}kg&nbsp;&nbsp;---&nbsp;&nbsp;${{ item.price }}/kg
                            </div>
                        </div>
                    </el-descriptions-item> -->
                    <!-- <el-descriptions-item label="支付状态">{{selectRow.ispayed}}</el-descriptions-item> -->
                </el-descriptions>
                <div class="BoxSumView">
                    <div class="FlexRowVCenter" style="margin: 7px 0">
                        <div class="TitleView" style="margin-right: 20px">打包箱子列表</div>
                        <el-button type="primary" size="mini" @click="addTab" round
                            >添加箱子<i class="el-icon-box el-icon--right"></i
                        ></el-button>
                    </div>
                    <el-tabs
                        v-model="form.boxsEditing"
                        type="card"
                        :closable="form.details && form.details.length > 1"
                        @tab-remove="removeTab"
                    >
                        <el-tab-pane :key="item.key" v-for="item in form.details" :label="item.title" :name="item.key">
                            <div slot="label" class="TabLabel">
                                <div>
                                    <el-badge
                                        :value="item.packages.length == 0 ? '空' : item.packages.length"
                                        :type="item.packages.length == 0 ? 'warning' : 'primary'"
                                        class="TabLabelBadge"
                                    >
                                        {{ item.title }}
                                    </el-badge>
                                </div>
                            </div>
                            <el-form ref="itemForm" size="mini" :inline="true" :model="item" :rules="itemRules">
                                <el-form-item label="重量(kg)" prop="weight">
                                    <el-input
                                        v-model="item.weight"
                                        @input="RefreshValue()"
                                        placeholder="重量"
                                        class="BoxInfoInput"
                                        maxlength="10"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="长度(cm)" prop="length">
                                    <el-input
                                        v-model="item.length"
                                        @input="RefreshValue()"
                                        placeholder="长度"
                                        class="BoxInfoInput"
                                        maxlength="10"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="宽度(cm)" prop="width">
                                    <el-input
                                        v-model="item.width"
                                        @input="RefreshValue()"
                                        placeholder="宽度"
                                        class="BoxInfoInput"
                                        maxlength="10"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="高度(cm)" prop="height">
                                    <el-input
                                        v-model="item.height"
                                        @input="RefreshValue()"
                                        placeholder="高度"
                                        class="BoxInfoInput"
                                        maxlength="10"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="体积(m³)" prop="volume">
                                    <el-input
                                        disabled
                                        v-model="item.volume"
                                        placeholder="体积"
                                        class="BoxInfoInput"
                                        maxlength="10"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="超长费用($)" prop="overlengthprice">
                                    <el-input
                                        v-model="item.overlengthprice"
                                        @input="RefreshValue()"
                                        placeholder="超长费用"
                                        class="BoxInfoInputMore"
                                        disabled
                                        maxlength="10"
                                    >
                                        <!-- <el-popover slot="append" placement="top" title="超长费用计费规则" trigger="hover">
                                            <p>
                                                1.最长边≥110cm﹤230cm [$40/箱]<br />
                                                2.次长边≥75cm [$40/箱]<br />
                                                3.最长边≥230cm﹤260cm [$200/箱]<br />
                                            </p>
                                            <el-button slot="reference" icon="el-icon-question"></el-button>
                                        </el-popover> -->
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="超重费用($)" prop="overweightprice">
                                    <el-input
                                        v-model="item.overweightprice"
                                        @input="RefreshValue()"
                                        placeholder="超重费用"
                                        class="BoxInfoInputMore"
                                        disabled
                                        maxlength="10"
                                    >
                                        <!-- <el-popover slot="append" placement="top" title="超重费用计费规则" trigger="hover">
                                            <p>
                                                1.单件实重≥22kg或者单件平均重量≥22kg [$40/箱]<br />
                                                2.单件实重≥60kg或者单件平均重量≥60kg [单独咨询]<br />
                                            </p>
                                            <el-button slot="reference" icon="el-icon-question"></el-button>
                                        </el-popover> -->
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="超周长费用($)" prop="oversizeprice">
                                    <el-input
                                        v-model="item.oversizeprice"
                                        @input="RefreshValue()"
                                        placeholder="超周长费用"
                                        disabled
                                        class="BoxInfoInputMore"
                                        maxlength="10"
                                    >
                                        <!-- <el-popover slot="append" placement="top" title="超周长费用计费规则" trigger="hover">
                                            <p>
                                                1.周长=最长边 + 2 * (宽 + 高)<br />
                                                2.周长≥250cm﹤310cm [$40/箱]<br />
                                                3.周长≥310cm﹤400cm [$200/箱]<br />
                                            </p>
                                            <el-button slot="reference" icon="el-icon-question"></el-button>
                                        </el-popover> -->
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="体积·重">
                                    <el-input v-model="item.volumeweight" class="BoxInfoInput" disabled></el-input>
                                </el-form-item>
                                <!-- <el-form-item label="套用阶梯价格($)">
                                    <el-input v-model="item.useStepPrice" class="BoxInfoInput" disabled></el-input>
                                </el-form-item> -->
                                <el-form-item label="单价费用($)">
                                    <el-input v-model="item.volumeweightprice" class="BoxInfoInput" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="纸箱费用($)" prop="paperprice">
                                    <el-input
                                        v-model="item.paperprice"
                                        @input="RefreshValue()"
                                        placeholder="纸箱费用"
                                        class="BoxInfoInput"
                                        maxlength="10"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="打木箱费用($)" prop="boxprice">
                                    <el-input
                                        v-model="item.boxprice"
                                        @input="RefreshValue()"
                                        placeholder="打木箱费用"
                                        class="BoxInfoInput"
                                        maxlength="10"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="珍珠棉包材费($)" prop="bounceprice">
                                    <el-input
                                        v-model="item.bounceprice"
                                        @input="RefreshValue()"
                                        placeholder="包材费($)"
                                        class="BoxInfoInput"
                                        maxlength="10"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="真空袋费用($)" prop="vacuumprice">
                                    <el-input
                                        v-model="item.vacuumprice"
                                        @input="RefreshValue()"
                                        placeholder="包装费"
                                        class="BoxInfoInput"
                                        maxlength="10"
                                    ></el-input>
                                </el-form-item>

                                <el-form-item label="保险费($)" prop="sueprice">
                                    <el-input
                                        v-model="item.sueprice"
                                        @input="RefreshValue()"
                                        placeholder="保险费"
                                        class="BoxInfoInput"
                                        maxlength="10"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="实际价值($)" prop="customprice">
                                    <el-input
                                        v-model="item.customprice"
                                        @input="RefreshValue()"
                                        placeholder="实际价值"
                                        class="BoxInfoInput"
                                        maxlength="10"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item label="包装附加手续费($)">
                                    <div class="FlexRowVCenter">
                                        <el-checkbox v-model="item.hasPackAddPrice" @change="RefreshValue()"> </el-checkbox>
                                        <el-input
                                            v-if="item.hasPackAddPrice"
                                            style="margin-left: 10px"
                                            v-model="item.packAddPrice"
                                            @input="RefreshValue()"
                                            placeholder="包装附加手续费"
                                            class="BoxInfoInputMore"
                                            maxlength="10"
                                        >
                                        </el-input>
                                    </div>
                                </el-form-item>
                                <el-form-item label="偏远地区附加费($)">
                                    <div class="FlexRowVCenter">
                                        <el-checkbox v-model="item.hasRemote" @change="RefreshValue()"> </el-checkbox>
                                        <el-input
                                            v-if="item.hasRemote"
                                            style="margin-left: 10px"
                                            v-model="item.remotePrice"
                                            disabled
                                            placeholder="偏远地区附加费"
                                            class="BoxInfoInputMore"
                                            maxlength="10"
                                        >
                                            <!-- <el-popover
                                                slot="append"
                                                width="250"
                                                placement="top"
                                                title="偏远地区附加费计费规则"
                                                trigger="hover"
                                            >
                                                <p>对于超出UPS正常派送范围的需要加收偏远附加费 4.5美金*7%/KG；</p>
                                                <el-button slot="reference" icon="el-icon-question"></el-button>
                                            </el-popover> -->
                                        </el-input>
                                    </div>
                                </el-form-item>
                                <el-form-item label="是否带电">
                                    <el-checkbox v-model="item.hasElectrified"> </el-checkbox>
                                </el-form-item>
                                <el-form-item label="包裹数量" prop="count">
                                    <el-input v-model="item.count" class="BoxInfoInput" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="总费用($)">
                                    <el-input v-model="item.price" class="BoxInfoInput" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="总费用(RMB)">
                                    <el-input v-model="item.targetprice" class="BoxInfoInput" disabled></el-input>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="BoxView">
                        <div class="BoxViewTitle">包裹列表</div>
                        <el-table
                            :data="selectRow.details"
                            :row-class-name="PackageTableRowClassName"
                            ref="PackageTable"
                            height="250"
                            border
                            style="width: 100%"
                        >
                            <el-table-column prop="tempName" align="center" fixed="left" width="70"> </el-table-column>
                            <el-table-column align="center" prop="box" label="装箱操作" fixed="left" width="110">
                                <template slot-scope="scope">
                                    <el-checkbox
                                        v-if="scope.row.box == null || scope.row.box === form.boxsEditing"
                                        :value="scope.row.box != null && scope.row.box === form.boxsEditing"
                                        @change="
                                            (e) => {
                                                PackCheckChange(e, scope.row);
                                            }
                                        "
                                    >
                                        {{ scope.row.box != null && scope.row.box === form.boxsEditing ? '已装箱' : '未装箱' }}
                                    </el-checkbox>

                                    <div v-else>{{ `装于箱子【${scope.row.box}】` }}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="expressnumber" align="center" label="快递单号" width="180"> </el-table-column>
                            <el-table-column prop="packageCode" align="center" label="包裹编号" width="180"> </el-table-column>
                            <el-table-column prop="packageName" align="center" label="品名" width="180"> </el-table-column>
                            <el-table-column prop="location" align="center" label="货架位置"> </el-table-column>
                            <el-table-column prop="weight" align="center" width="50" label="物品重量"> </el-table-column>
                            <el-table-column prop="count" align="center" width="50" label="物品数量"> </el-table-column>
                            <el-table-column prop="payedprice" align="center" width="90" label="到付金额($)"> </el-table-column>
                            <el-table-column label="图片" min-width="180" align="center">
                                <template slot-scope="scope">
                                    <template v-if="scope.row.images && scope.row.images.length > 0">
                                        <el-image
                                            v-for="(image, i) in scope.row.images"
                                            :key="i"
                                            style="height: 50px; width: 50px"
                                            :src="image"
                                            fit="cover"
                                            :preview-src-list="scope.row.images"
                                        ></el-image>
                                    </template>
                                    <div v-else>暂无图片</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="视频" min-width="180" align="center">
                                <template slot-scope="scope">
                                    <template v-if="scope.row.videos && scope.row.videos.length > 0">
                                        <div v-for="(video, i) in scope.row.videos" :key="i">
                                            <el-link :href="video" target="_blank" icon="el-icon-video-play"
                                                >视频链接【{{ i + 1 }}】</el-link
                                            >
                                        </div>
                                    </template>
                                    <div v-else>暂无视频</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <el-form-item label="总立方数(m³)" label-width="110px">
                    <el-input v-model="form.sumVolume" disabled style="width: 150px"></el-input>
                </el-form-item>
                <el-form-item label="总重量(kg)" label-width="100px">
                    <el-input v-model="form.sumWeight" disabled style="width: 150px"></el-input>
                </el-form-item>
                <el-form-item label="总体积重" label-width="100px">
                    <el-input v-model="form.sumVolumeWeight" disabled style="width: 150px"></el-input>
                </el-form-item>
                <el-form-item label="包裹合计到付金额($)" label-width="150px">
                    <el-input v-model="form.sumPayedprice" disabled style="width: 150px"></el-input>
                </el-form-item>

                <el-form-item label="总运费($)" label-width="100px">
                    <el-input v-model="form.price" disabled style="width: 150px"></el-input>
                </el-form-item>
                <el-form-item label="总运费(RMB)" label-width="100px">
                    <el-input v-model="form.targetprice" disabled style="width: 150px"></el-input>
                </el-form-item>
                <!-- <el-form-item label="邮编">
                    <el-input v-model="form.mailcode" placeholder="请输入邮编" maxlength="10" clearable style="width: 150px"></el-input>
                </el-form-item> -->
                <el-form-item label="备注">
                    <el-input v-model="form.remark" style="width: 300px" placeholder="请输入备注" clearable maxlength="50"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
        <detailDialog :visible.sync="detailVisible" :data="detailInfo" :dataType="detailType" width="90%">
            <template slot="details">
                <template v-for="(item, index) in detailInfo.details">
                    <el-descriptions-item :key="index" :label="`包裹${index + 1}`" :span="2">
                        <div class="FlexRowWarp">
                            <div class="Dialog_Desc_Item">品名：{{ item.packageName }}</div>
                            <div class="Dialog_Desc_Item">快递单号：{{ item.expressnumber }}</div>
                            <div class="Dialog_Desc_Item">包裹编号：{{ item.packageCode }}</div>
                            <div class="Dialog_Desc_Item">货架位置：{{ item.location }}</div>
                            <div class="Dialog_Desc_Item" v-if="item.payedprice">到付金额：${{ item.payedprice }}</div>
                            <div class="Dialog_Desc_Item">数量：{{ item.count }}个</div>
                            <div class="Dialog_Desc_Item">重量：{{ item.weight }}kg</div>
                        </div>
                    </el-descriptions-item>
                </template>
            </template>
            <template slot="boxs" v-if="detailInfo.postedDetails && detailInfo.postedDetails.details">
                <el-descriptions-item :span="2" label="打包箱信息" :contentStyle="{ padding: 0 }">
                    <el-table :data="detailInfo.postedDetails.details" style="width: 100%" stripe border size="mini" show-summary>
                        <el-table-column type="index" label="序号" align="center" />
                        <el-table-column prop="weight" label="重量" align="center" width="60" />
                        <el-table-column prop="length" label="长度(cm)" align="center" width="75" />
                        <el-table-column prop="width" label="宽度(cm)" align="center" width="75" />
                        <el-table-column prop="height" label="高度(cm)" align="center" width="75" />
                        <el-table-column prop="volume" label="体积(m³)" align="center" width="70" />
                        <el-table-column prop="volumeweight" label="体积·重" align="center" width="70" />
                        <el-table-column prop="overlengthprice" label="超长费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="overweightprice" label="超重费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="oversizeprice" label="超周长费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="vacuumprice" label="真空袋费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="paperprice" label="纸箱费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="boxprice" label="打木箱费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="bounceprice" label="珍珠棉包材费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="sueprice" label="保险费" align="center" :formatter="formatMoney" />
                        <el-table-column prop="customprice" label="实际价值" align="center" :formatter="formatMoney" />
                        <el-table-column prop="packAddPrice" label="包装附加手续费" align="center" :formatter="formatMoney" width="110" />
                        <el-table-column prop="remotePrice" label="偏远地区附加费" align="center" :formatter="formatMoney" width="110" />
                        <el-table-column prop="price" label="箱子合计费用" align="center" :formatter="formatMoney" />
                    </el-table>
                </el-descriptions-item>
                <template v-for="(item, index) in detailInfo.postedDetails.details">
                    <el-descriptions-item :key="index" :label="`第${index + 1}个打包箱`" :span="2">
                        <div class="FlexRowWarp Dialog_Desc_Package" v-for="(packitem, packindex) in item.packages" :key="packindex">
                            <div class="Dialog_Desc_Label Dialog_Desc_Item">【包裹{{ packindex + 1 }}】</div>
                            <div class="Dialog_Desc_Item">品名：{{ packitem.packageName }}</div>
                            <div class="Dialog_Desc_Item">快递单号：{{ packitem.expressnumber }}</div>
                            <div class="Dialog_Desc_Item">包裹编号：{{ packitem.packageCode }}</div>
                            <div class="Dialog_Desc_Item">货架位置：{{ packitem.location }}</div>
                            <div class="Dialog_Desc_Item" v-if="item.payedprice">到付金额：${{ packitem.payedprice }}</div>
                            <div class="Dialog_Desc_Item">数量：{{ packitem.count }}个</div>
                            <div class="Dialog_Desc_Item">重量：{{ packitem.weight }}kg</div>
                        </div>
                    </el-descriptions-item>
                </template>
                <el-descriptions-item label="订单总金额"> ${{ detailInfo.postedDetails.price }} </el-descriptions-item>
                <el-descriptions-item label="备注">
                    {{ detailInfo.postedDetails.remark }}
                </el-descriptions-item>
            </template>
        </detailDialog>
        <el-dialog title="问题件处理" :visible.sync="errorVisible" width="60%">
            <el-form ref="errorform" size="mini" :inline="true" :model="errorform">
                <el-descriptions :column="2" size="mini" :labelStyle="{ width: '150px' }" :contentStyle="{ 'min-width': '100px' }" border>
                    <el-descriptions-item label="内单号">{{ errorform.code }}</el-descriptions-item>
                    <el-descriptions-item label="追踪单号">{{ errorform.outnumber }}</el-descriptions-item>
                    <el-descriptions-item label="品名">{{ errorform.name }}</el-descriptions-item>
                    <el-descriptions-item label="目的地">{{ errorform.address }}</el-descriptions-item>
                    <el-descriptions-item label="订单金额">${{ errorform.price }}</el-descriptions-item>
                    <el-descriptions-item label="处理时间">{{ errorform.lasttime }}</el-descriptions-item>
                    <el-descriptions-item label="处理结果">{{ errorform.status == 1 ? '处理中' : '已完成' }}</el-descriptions-item>
                </el-descriptions>
                <template v-for="(item, index) in errorform.list">
                    <el-form-item label="问题描述" label-width="100px" :key="index">
                        <el-input
                            v-model="item.remark"
                            placeholder="请输入问题描述"
                            maxlength="100"
                            show-word-limit
                            disabled
                            class="formInput"
                            type="textarea"
                            style="width: 450px; margin: 15px 0"
                        ></el-input>
                        {{ item.addusername }} 时间:{{ item.addtime }}
                    </el-form-item>
                </template>

                <el-form-item label="处理描述" label-width="100px">
                    <el-input
                        v-model="errorform.newremark"
                        placeholder="请输入处理结果"
                        maxlength="100"
                        show-word-limit
                        clearable
                        class="formInput"
                        type="textarea"
                        style="width: 450px; margin: 15px 0"
                    ></el-input>
                </el-form-item>
                <el-form-item label="状态" label-width="100px" prop="hasended" v-if="errorform.status == 1">
                    <el-checkbox v-model="errorform.hasended">是否处理完成</el-checkbox>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="errorVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveError">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import API from '../../../api/index'; //读入restfulAPI
import StringTool from '../../../utils/StringTool';
import JSTool from '../../../utils/JSTool';
import MainTool from '../../../utils/MainTool';
import detailDialog from '../../common/dialog/detailDialog.vue';
import dataTable from './dataTable';
let NothingBox = {
    count: 0,
    length: '0',
    width: '0',
    height: '0',
    weight: '0',
    volume: '0',
    volumeweightTrue: '0',
    volumeweight: '0',
    volumeweightprice: '0',
    customprice: '0', //申报价值
    sueprice: '0', //保险费
    overlengthprice: '0',
    overweightprice: '0',
    oversizeprice: '0',
    paperprice: '0',
    vacuumprice: '0',
    boxprice: '0',
    bounceprice: '0',
    price: '0',
    targetprice: '0',
    hasPackAddPrice: false,
    packAddPrice: '30',
    hasRemote: false,
    remotePrice: '0',
    hasElectrified: false
};
export default {
    name: 'packageInTable',
    mixins: [dataTable],
    components: {
        detailDialog
    },
    data() {
        let CheckDigit = (rule, value, callback) => {
            if (rule.required && StringTool.Empty(String(value))) {
                return callback(new Error('不能为空'));
            }
            if (!StringTool.DigitNumber(String(value))) {
                return callback(new Error('只能为整数或小数'));
            }
            if (Number(value) < 0) {
                return callback(new Error('只能为正数'));
            }
            callback();
        };
        return {
            searchSet: {
                code: '',
                userCode: '',
                userName: '',
                userMobile: '',
                startTime: '',
                endTime: '',
                packageUserName: '',
                orderStatus: '',
                status: ''
            },
            orderStatusOption: {
                1: { label: '申请打包', value: '1', color: '#ffb248' },
                2: { label: '发货待确认', value: '2', color: '#339ca8' },
                6: { label: '问题件', value: '6', color: '#626c91' }
            },
            editVisible: false,
            selectRow: {},
            checktest: false,
            form: {
                id: 0,
                details: [],
                price: '',
                remark: '',
                mailcode: '',
                currencychangerateid: '',
                targetprice: '',
                sumPayedprice: ''
            },

            ExchangeRateId: '',
            ExchangeRate: 0,

            itemRules: {
                count: [{ type: 'number', min: 1, message: '数量必须大于0', required: true, trigger: 'blur' }],
                length: [
                    {
                        validator: (rule, value, callback) => {
                            return Number(value) == 0 ? callback(new Error('不能为零')) : callback();
                        },
                        trigger: 'blur'
                    },
                    { validator: CheckDigit, required: true, trigger: 'blur' }
                ],
                width: [
                    {
                        validator: (rule, value, callback) => {
                            return Number(value) == 0 ? callback(new Error('不能为零')) : callback();
                        },
                        trigger: 'blur'
                    },
                    { validator: CheckDigit, required: true, trigger: 'blur' }
                ],
                height: [
                    {
                        validator: (rule, value, callback) => {
                            return Number(value) == 0 ? callback(new Error('不能为零')) : callback();
                        },
                        trigger: 'blur'
                    },
                    { validator: CheckDigit, required: true, trigger: 'change' }
                ],
                weight: [
                    {
                        validator: (rule, value, callback) => {
                            return Number(value) == 0 ? callback(new Error('不能为零')) : callback();
                        },
                        trigger: 'chablurnge'
                    },
                    { validator: CheckDigit, required: true, trigger: 'blur' }
                ],
                sueprice: [{ validator: CheckDigit, required: true, trigger: 'blur' }],
                customprice: [{ validator: CheckDigit, required: true, trigger: 'blur' }],

                vacuumprice: [{ validator: CheckDigit, required: true, trigger: 'blur' }],
                paperprice: [{ validator: CheckDigit, required: true, trigger: 'blur' }],
                boxprice: [{ validator: CheckDigit, required: true, trigger: 'blur' }],
                bounceprice: [{ validator: CheckDigit, required: true, trigger: 'blur' }]
            },
            detailVisible: false,
            detailInfo: {},
            detailType: [
                {
                    attrs: { column: 2, title: '基础信息' },
                    list: [
                        { label: '内单号', key: 'code' },
                        { label: '添加时间', key: 'addtime' },
                        { label: '发货国家', key: 'nationname' },
                        { label: '通道名称', key: 'channelname' },

                        { label: '发货用户代码', key: 'appuserCode' }, //{ label: "发货用户昵称", key: "appusername" },
                        {
                            label: '订单状态',
                            key: 'orderstatus',
                            format: (d, v) => {
                                return this.orderStatusOption[v] ? this.orderStatusOption[v].label : '';
                            }
                        }
                    ]
                },
                {
                    attrs: { column: 2, title: '包裹信息', direction: 'vertical' },
                    if: () => {
                        return !this.detailInfo.postedDetails || !this.detailInfo.postedDetails.details;
                    },
                    list: [{ key: 'details', type: 'slot' }]
                },
                {
                    attrs: { column: 2, title: '出货信息', direction: 'vertical' },
                    if: () => {
                        return this.detailInfo.postedDetails && this.detailInfo.postedDetails.details;
                    },
                    list: [
                        { key: 'boxs', type: 'slot' }
                        // { label: "订单总金额", key: ["postedDetails", "price"] }, { label: "备注", key: ["postedDetails", "remark"] },
                    ]
                }
            ],
            errorVisible: false,
            errorform: {
                id: '',
                code: '',
                name: '',
                outnumber: '',
                address: '',
                count: 0,
                remark: '',
                newremark: '',
                hasended: true,
                price: 0,
                list: [],
                status: 1,
                addtime: ''
            }
        };
    },
    created() {
        this.init();
    },
    mounted() {},
    computed: {
        // 计算属性的 getter
        formDetailsSize: function () {
            // `this` 指向 vm 实例
            return this.form.details.length || 0;
        }
    },
    watch: {},
    methods: {
        //页面初始化
        init() {
            this.getData();
        },

        getData() {
            this.tableLoading = true;
            API.StandardDoWith(API.PackageApplyOut.Get(this.getQuery()), this, {
                success: (detail) => {
                    this.itemTotal = detail.count;
                    this.tableData = detail.list;
                    this.ExchangeRateId = detail.currencychangerateid;
                    this.ExchangeRate = Number(detail.currencychangerate);
                },
                complete: () => {
                    this.tableLoading = false;
                }
            });
        },
        handleDetail(index, row) {
            this.detailVisible = true;
            let obj = JSTool.DeepClone(row);

            // obj.details.map((item) => {
            //     item.images = MainTool.FileIdToUrl(item.images);
            //     item.videos = MainTool.FileIdToUrl(item.videos);
            // });
            if (obj.postedDetails && obj.postedDetails.details) {
                obj.postedDetails.details.map((box) => {
                    if (box.packages) {
                        box.packages.map((item) => {
                            obj.details.map((pack) => {
                                if (item.packageId === pack.packageId) {
                                    Object.assign(item, pack);
                                }
                            });
                        });
                    }
                    box.volume = ((Number(box.length) * Number(box.width) * Number(box.height)) / 1000000).toFixed(2);
                });
            }
            this.detailInfo = obj;
        },

        handlePack(index, row) {
            let obj = JSTool.DeepClone(row);

            if (obj.postedDetails == null || obj.postedDetails.details == null) {
                this.form = {
                    id: obj.id,
                    boxsEditing: '1',
                    details: [
                        {
                            key: '1',
                            title: '箱子【1】',
                            packages: [],
                            ...NothingBox
                        }
                    ],
                    price: '0',
                    remark: '',
                    mailcode: '',
                    currencychangerateid: this.ExchangeRateId,
                    targetprice: '0',
                    sumPayedprice: '0',
                    sumVolumeWeight: 0,
                    sumWeight: 0,
                    sumVolume: 0
                };
            } else {
                obj.postedDetails.details.map((item, index) => {
                    item.key = String(index + 1);
                    item.title = '箱子【' + item.key + '】';
                    let packageIdList = [];
                    item.packages.map((pack) => {
                        packageIdList.push(pack.packageId);
                    });
                    item.packages = packageIdList;
                });
                obj.postedDetails.currencychangerateid = this.ExchangeRateId;
                obj.postedDetails.id = obj.id;
                obj.postedDetails.boxsEditing = '1';
                this.form = obj.postedDetails;
            }
            obj.details.map((item, index) => {
                item.tempName = '包裹' + (index + 1) + '号';
                item.box = null;
                this.form.details.map((box) => {
                    box.packages.map((pack) => {
                        if (pack == item.packageId) {
                            item.box = box.key;
                        }
                    });
                });

                item.images = MainTool.FileIdToUrl(item.images);
                item.videos = MainTool.FileIdToUrl(item.videos);
            });
            delete obj.postedDetails;
            this.selectRow = obj;
            this.RefreshValue();
            this.editVisible = true;
        },

        // 保存编辑
        saveEdit() {
            let validate = true;
            for (let i = 0; i < this.$refs.itemForm.length; i++) {
                this.$refs.itemForm[i].validate((valid) => {
                    if (valid) {
                    } else {
                        validate = false;
                        this.$message.error(this.form.details[i].title + `验证失败，无法提交`);
                        return false;
                    }
                });
            }
            if (!validate) {
                return;
            }
            let HasPackageNoInto = null;
            this.selectRow.details.map((pack) => {
                if (pack.box == null) HasPackageNoInto = pack.tempName;
            });
            if (HasPackageNoInto) {
                this.$message.error(`${HasPackageNoInto}未放入打包箱，无法提交`);
                return;
            }
            let obj = JSTool.DeepClone(this.form);
            obj.details.map((item) => {
                delete item.key;
                delete item.title;
                delete item.volumeweightprice;
                item.length = Number(item.length);
                item.width = Number(item.width);
                item.height = Number(item.height);
                item.weight = Number(item.weight);
                item.overlengthprice = Number(item.overlengthprice);
                item.overweightprice = Number(item.overweightprice);
                item.oversizeprice = Number(item.oversizeprice);
                item.volumeweight = Number(item.volumeweight);
                item.paperprice = Number(item.paperprice);
                item.boxprice = Number(item.boxprice);
                item.bounceprice = Number(item.bounceprice);
                item.customprice = Number(item.customprice);
                item.vacuumprice = Number(item.vacuumprice);
                item.remotePrice = Number(item.remotePrice);
                item.packAddPrice = Number(item.packAddPrice);
                item.sueprice = Number(item.sueprice);
                item.price = Number(item.price);
                item.targetprice = Number(item.targetprice);
            });
            obj.price = Number(obj.price);
            obj.targetprice = Number(obj.targetprice);
            delete obj.boxsEditing;
            API.StandardDoWith(API.PackageApplyOut.Post(obj), this, {
                success: (detail) => {
                    this.editVisible = false;
                    this.$message.success(`成功提交出货单`);
                    this.getData();
                }
            });
        },
        formatPackNumber(row, column, cellValue, index) {
            return cellValue ? cellValue.length : 0;
        },

        GetCurrentStepPrice(vmw) {
            if (this.selectRow.pricedetails) {
                for (let it of this.selectRow.pricedetails) {
                    if (vmw >= it.minweight && vmw <= it.maxweight) {
                        return { unit: it.price, sum: it.price };
                    }
                }
            }
            return { unit: this.selectRow.channelprice, sum: this.selectRow.channelprice * vmw };
        },
        //刷新BOX的各项数据计费
        RefreshValue() {
            let sumPayedprice = 0; //合计到付金额
            this.selectRow.details.map((it) => {
                if (it.payedprice && !Number.isNaN(Number(it.payedprice))) {
                    sumPayedprice += Number(it.payedprice);
                }
            });
            let setAllSumPrice = sumPayedprice;
            let sumVolumeWeight = 0;
            let sumWeight = 0;
            let sumVolume = 0;
            this.form.details.map((item) => {
                let volume = Number(item.length) * Number(item.width) * Number(item.height);
                let volume_m = volume / 1000000;
                let vm = volume / 5000;
                let setVolumeWeight = 0;
                let setVolumeWeightPrice = 0;
                let setSumPrice = 0;
                let overweightprice = 0;
                let overlengthprice = 0;
                let oversizeprice = 0;
                if (!Number.isNaN(vm)) {
                    sumVolume += (Number(item.length) * Number(item.width) * Number(item.height)) / 1000;
                }
                if (!Number.isNaN(vm) && !Number.isNaN(Number(item.weight))) {
                    setVolumeWeight = Math.max(vm, Number(item.weight));
                    sumVolumeWeight += Math.ceil(setVolumeWeight);
                    let usePrice = this.GetCurrentStepPrice(Math.ceil(setVolumeWeight));
                    if (!Number.isNaN(Number(usePrice.sum))) {
                        setVolumeWeightPrice = usePrice.sum;
                    }
                }
                if (!Number.isNaN(Number(item.weight))) {
                    sumWeight += Number(item.weight);
                    if (Number(item.weight) >= 22) {
                        overweightprice = 40;
                    }
                }
                if (!Number.isNaN(Number(item.length))) {
                    if (Number(item.length) >= 230) {
                        overlengthprice = 200;
                    } else if (Number(item.length) >= 110) {
                        overlengthprice = 40;
                    }
                    if (Number(item.width) >= 75) {
                        overlengthprice += 40;
                    }
                }
                if (!Number.isNaN(vm)) {
                    let size = Number(item.length) + (Number(item.width) + Number(item.height)) * 2;
                    if (size >= 310) {
                        oversizeprice = 200;
                    } else if (size >= 250) {
                        oversizeprice = 40;
                    }
                }
                let extraPrice =
                    Number(overlengthprice) +
                    Number(overweightprice) +
                    Number(oversizeprice) +
                    Number(item.paperprice) +
                    Number(item.boxprice) +
                    Number(item.bounceprice) +
                    Number(item.sueprice) +
                    Number(item.vacuumprice);
                if (item.hasPackAddPrice) {
                    extraPrice += Number(item.packAddPrice);
                }
                if (item.hasRemote) {
                    item.remotePrice = (4.5 * 0.07 * item.weight).toFixed(2);
                    extraPrice += Number(item.remotePrice);
                }
                if (!Number.isNaN(extraPrice)) {
                    setSumPrice = extraPrice + setVolumeWeightPrice;
                }
                item.volumeweightTrue = setVolumeWeight.toFixed(2);
                item.volumeweight = Math.ceil(setVolumeWeight);
                item.volume = volume_m.toFixed(2);
                item.volumeweightprice = setVolumeWeightPrice.toFixed(2);
                setAllSumPrice += setSumPrice;

                item.price = setSumPrice.toFixed(2);
                item.targetprice = (setSumPrice * this.ExchangeRate).toFixed(2);
                item.count = item.packages.length;
                item.overweightprice = overweightprice;
                item.overlengthprice = overlengthprice;
                item.oversizeprice = oversizeprice;
            });

            this.form.sumPayedprice = sumPayedprice.toFixed(2);
            this.form.price = setAllSumPrice.toFixed(2);
            this.form.targetprice = (setAllSumPrice * this.ExchangeRate).toFixed(2);
            this.form.sumVolumeWeight = sumVolumeWeight;
            this.form.sumWeight = sumWeight.toFixed(2);
            this.form.sumVolume = sumVolume.toFixed(2);
        },
        addTab() {
            let last = this.form.details[this.form.details.length - 1];

            let newIndex = String(Number(last.key) + 1);
            this.form.details.push({
                title: `箱子【${newIndex}】`,
                key: newIndex,
                packages: [],
                ...NothingBox
            });
            this.form.boxsEditing = newIndex;
        },
        removeTab(targetName) {
            let tabs = this.form.details;
            let activeName = this.form.boxsEditing;
            tabs.forEach((tab, index) => {
                if (tab.key === targetName) {
                    if (activeName === targetName) {
                        let nextTab = tabs[index + 1] || tabs[index - 1];
                        if (nextTab) {
                            activeName = nextTab.key;
                        }
                    }
                    //清理包裹
                    tab.packages.map((id) => {
                        this.selectRow.details.map((pack) => {
                            if (id == pack.packageId) {
                                pack.box = null;
                            }
                        });
                    });
                }
            });

            this.form.boxsEditing = activeName;
            this.form.details = tabs.filter((tab) => tab.key !== targetName);
            this.RefreshValue();
        },
        PackCheckChange(e, row) {
            let item = null;
            this.form.details.map((box) => {
                if (box.key === this.form.boxsEditing) item = box;
            });
            if (e) {
                row.box = this.form.boxsEditing;
                item.packages.push(row.packageId);
            } else {
                row.box = null;
                for (let i = 0; i < item.packages.length; i++) {
                    if (item.packages[i] == row.packageId) {
                        item.packages.splice(i, 1);
                    }
                }
            }
            item.count = item.packages.length;
        },

        TableRowClassName({ row, rowIndex }) {
            if (Number(row.orderstatus) == 2) {
                return 'success-row';
            } else if (Number(row.orderstatus) == 1) {
                return 'warning-row';
            }

            return '';
        },
        PackageTableRowClassName({ row, rowIndex }) {
            if (row.box == this.form.boxsEditing) {
                return 'success-row';
            } else if (row.box == null) {
                return '';
            }
            return 'warning-row';
        },
        handleErrorDetail(index, row) {
            this.errorform.id = row.id;
            this.errorform.newremark = '';
            this.errorform.hasended = false;
            API.StandardDoWith(API.OrderError.Get({ id: this.errorform.id }), this, {
                success: (detail) => {
                    this.errorform.code = detail.code;
                    this.errorform.name = detail.name;
                    this.errorform.count = detail.count;
                    this.errorform.outnumber = detail.outnumber;
                    this.errorform.remark = detail.remark;
                    this.errorform.address = detail.address;
                    this.errorform.list = detail.list;
                    this.errorform.addtime = detail.addtime;
                    this.errorform.status = detail.status;
                    this.errorVisible = true;
                },
                complete: () => {}
            });
        },
        saveError() {
            if (this.errorform.newremark) {
                API.StandardDoWith(
                    API.OrderError.Post({ id: this.errorform.id, remark: this.errorform.newremark, isclosed: this.errorform.hasended }),
                    this,
                    {
                        success: (detail) => {
                            this.errorVisible = false;
                            this.$message.success(`成功提交问题件处理`);
                            this.getData();
                        },
                        complete: () => {}
                    }
                );
            }
        },
        handleExport() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.OrderApplyExport(), '申请出货数据.xlsx');
                })
                .catch((err) => {});
        },
        formatMoney(r, c, v, i) {
            return '$' + StringTool.FormatDigit(v);
        }
    }
};
</script>

<style scoped>
@import '../../../assets/css/dataTable.css';
.RowLineSpaceBetween {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.RowLine {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.RowCell {
    flex: 1;
}

.TitleView {
    font-size: 17px;
    font-weight: bold;
}
.BoxView {
    padding: 5px;
    margin: 5px;
    border: 2px #e4e7ed solid;
    border-radius: 5px;
}
.BoxViewTitle {
    margin: 5px 5px;
    font-weight: bold;
    font-size: 15px;
}
.BoxSumView {
    padding: 5px;
    margin: 5px;
    border: 2px #e4e7ed solid;
    border-radius: 5px;
}
.TabLabel {
    height: 100%;
    width: 80px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.TabLabel div {
    height: 75%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.TabLabelBadge {
    display: flex;
    justify-content: center;
    align-items: center;
}
.BoxInfoInput {
    width: 100px;
}
.BoxInfoInputMore {
    width: 120px;
}
.StepPriceItem {
    padding: 2px 4px;
    margin: 1px 3px;
    border: 1px #ebeef5 solid;
    border-radius: 5px;
}
.Dialog_Desc_Label {
    font-weight: bold;
}
.Dialog_Desc_Item {
    margin: 3px 10px;
}
.Dialog_Desc_Package {
    border-top: #e4e7ed 2px dotted;
}
.Dialog_Desc_Item_Image {
    height: 80px;
    width: 80px;
    margin: 5px 5px;
    border: 2px #ebeef5 solid;
    border-radius: 10px;
    overflow: hidden;
}
</style>
